<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 键盘事件的相关属性
    // key  按键对应的字符   (字符相关 => 判断字符范围)
    // code 按键对应的键盘符 (按键相关  书写较为麻烦)
    // keyCode  在keydown keyup => 表示按键对应的键盘码(keydown keyup所有按键均可触发 一个按键一个码,ctrl alt shift enter 控制键位, 键盘码是一样的) => 着重点在于按了哪个按键
    //          在keypress => 表示按键对应的字符的编码(在keypress写入字符相关的按键可以触发, 一个字符一个编码) => 着重点在于按了哪个字符

    // e.isComposing   是否开启中文输入法 (仅对 keydown keyup有效, keypress无法监听到)



    
    //事件的传播机制 => 父(代)子元素绑定相同类型的事件 -> 事件如何传播?
    // a. 相同类型的事件
    // b. 有就触发 没有就跳过 继续向后传播
    
    // 事件的传播机制(历史渊源)
    // 事件捕获(网景): 从最不特定的元素到最特定的元素,从外到内
    // window -> document -> html -> body -> wrap -> sub -> box

    // 事件冒泡(IE): 从最特定的元素到最不特定元素,从内到外触发
    // box -> sub -> wrap -> body -> html -> document -> window 

    // 主流: 事件冒泡

    // 注意: DOM一级事件 只有事件冒泡,没有事件捕获

    // 如何以事件捕获的形式传播事件 => addEventListener() => W3C新增(可以分别以事件冒泡 事件捕获形式触发事件)
    // ele.addEventListener(eventType,callback,useCapture)  添加事件监听
    // eventType  => 绑定事件的类型 (click dblclick keydown load)
    // callback   => 事件触发时执行的函数
    // useCapture => 布尔值 是否在捕获阶段触发事件 (默认false => 冒泡阶段触发, true => 捕获阶段触发)

    // 事件流:
    // 1. 捕获阶段: 从最不特定的元素到最特定的元素,从外到内 
    // window -> document -> html -> body -> wrap -> sub -> box(事件源)

    // 2. 目标阶段: 如果目标元素上有相同类型的事件就触发,没有就跳过,进入冒泡阶段
    // box

    // 3. 冒泡阶段: 从最特定的元素到最不特定元素,从内到外触发
    // box -> sub -> wrap -> body -> html -> document -> window 


    // 事件传播的缺点:  传播机制时默认的 不想传也要传
    
    // 阻止事件冒泡/事件捕获
    // e.stopPropagation();   // 事件对象的方法 (常规浏览器)
    // e.cancelBubble = true; // ie低版本/常规浏览器 (通过cancelBubble 来控制)

    // 兼容写法
    // if(e.stopPropagation){ //取值 判断方法是否存在 (存在:返回函数  不存在(ie低版本) => undefined )
    //     e.stopPropagation();
    // }else{
    //     e.cancelBubble = true;
    // }









</script>
</html>